<template>
	<view>
		<view class="program">
			<view class="head">
				<view class="title">
					<uni-icons type="bars" size="16" color="#d8cc40"></uni-icons>
					<text>热门项目</text>
				</view>
				<view class="more">
					<text>更多</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
			<view class="body">
				<view class="item" v-for="(item,index) in 4" :key="index">
					<card></card>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import card from '@/components/cosmetology/tabbar/index/program/card/card.vue';
</script>

<style lang="scss" scoped>
	.program{
		width: 100%;
		background-color: $uni-bg-color;
		display: flex;
		flex-flow: column;
		box-sizing: border-box;
		padding: mp-sizing(15);
		margin-bottom: mp-sizing(10);
		.head{
			display: flex;
			flex-flow: row;
			align-items: center;
			justify-content: space-between;
			margin-bottom: mp-sizing(15);
			.title{
				display: flex;
				flex-flow: row;
				align-items: center;
				text{
					margin-left: mp-sizing(5);
					font-size: mp-sizing(16);
					font-weight: 600;
				}
			}
			.more{
				display: flex;
				flex-flow: row;
				align-items: center;
				text{
					font-size: mp-sizing(14);
					color: $uni-text-color-grey
				}
			}
		}
		.body{
			display: flex;
			flex-flow: row nowrap;
			overflow: hidden;
			overflow-x: scroll;
			.item{
				min-width: mp-sizing(140);
				margin-right: mp-sizing(10);
			}
		}
	}
</style>